<template>
  <h1>基础用法</h1>
  <el-input v-model="input" placeholder="请输入" />


  <h1>禁用状态</h1>
  <el-input placeholder="不可输入"  disabled/>

  <h1>一键清空输入框</h1>
  <el-input v-model="input1" placeholder="请输入"  clearable/>

  <h1>密码框</h1>
  <el-input v-model="input" placeholder="请输入密码"  type="password" show-password/>

  <h1>文本域</h1>
  <el-input v-model="input2"  type="textarea"/>
  <h2>输入最大长度</h2>
  <el-input v-model="input2"  type="text" maxlength="10"/>
  <h2>显示输入限制</h2>
  <el-input v-model="input2"  type="text" maxlength="10" show-word-limit/>



  <h1>带图标输入框</h1>
  <el-input v-model="input" placeholder="请输入" prefix-icon="User"/>

  <h1>事件</h1>
  <el-input v-model="input" placeholder="请输入" @blur="A" />
  <h1>事件传值</h1>
  <el-input v-model="input3" placeholder="请输入" @change="B" />
  <br>
  <br>
  <el-input v-model="input4" placeholder="请输入" @input="C" />


  <h1>方法</h1>
  <el-input v-model="input5" ref="inputs"></el-input>
  <el-button @click="focusInput">点击</el-button>

</template>

<script setup>
import { ref } from 'vue'

const input = ref('')
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
const input5 = ref('')


const A = ()=> {
  console.log("失去焦点")
}

// 当失去焦点或者按下Enter时触发,只触发一次
const B = (value)=> {
  console.log("改变" + value)
}

// 当input值改变就触发,可触发多次
const C = (value)=> {
  console.log("改变" + value)
}


const inputs = ref()
const focusInput = ()=> {
  inputs.value.focus()
}

</script>

<style scoped>

</style>